<template>
	<view style="height: 100%">
		<!-- 分类导航栏 -->
		<view class="horizonal-tab">
			<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
				<block v-for="(item,index) in menuList" :key="index">
					<view class="scroll-tab-item" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
						{{item}}
						<view class="scroll-tab-line"></view>
					</view>
				</block>
			</scroll-view>
		</view>

		<!-- 商品栏 -->
		<view class="commodity">
			<view class="list">
				<view class="list_item" v-for="(item,index) in goodsList" :key="index">
					<view class="page-box">
						<view class="top">
							<view class="topleft">
								<view class="store">{{item.theme}}</view>
							</view>
						</view>
						<view class="item">
							<view class="left">
								<image :src="imSrc+item.picture" mode="aspectFill"></image>
							</view>
							<view class="content">
								<view class="title u-line-2">{{item.goodsDescribe}}</view>
								<view class="delivery-time">交易地点:{{item.address}}</view>
							</view>
							<view class="right">
								<view class="price">
									￥{{item.price}}
								</view>
							</view>
						</view>
						<view class="bottom">
							<button class="search-btn" v-if="btnShow" @click="orderReset(item.id)">下架</button>
							<button class="search-btn" v-if="btnShow1" @click="orderOver(item.id)">确认收货</button>
							<button class="search-btn" v-if="btnShow1" @click="orderEnd(item.id)">终止交易</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import homeGoods from "@/api/homeGoods.js"
	import user from "@/api/user.js"
	//图片前缀路径
	//https://xxgc-lin-blog.oss-cn-chengdu.aliyuncs.com/
	export default {
		data() {
			return {
				imSrc: 'https://xxgc-lin-blog.oss-cn-chengdu.aliyuncs.com/',
				//菜单
				menuList: ["全部", "我的发布", "我的购买"],
				tabIndex: 0,
				//发布的商品
				myShopList: [],
				//购买的商品
				mySellList: [],
				//需要展示的信息,
				goodsList: [],
				//发布按钮显示
				btnShow: false,
				//购买按钮显
				btnShow1: false,
			}
		},
		onLoad: function(option) {
			console.log(option.id)
			if (option.id == 1) {
				this.tabIndex = 1

				user.mySell().then(res => {
					// console.log(res)
					this.goodsList = res.data.records
					this.btnShow = true
					this.btnShow1 = false
				})
			} else if (option.id == 2) {
				this.tabIndex = 2
				user.myshopping().then(res => {
					// console.log(res)
					this.goodsList = res.data.records
					this.btnShow1 = true
					this.btnShow = false
				})
			}
		},
		onShow() {
			this.getMyShop()
			this.getMySell()
		},
		methods: {
			//点击切换
			toggleTab(index) {

				this.tabIndex = index;
				if (index == 0) {
					this.getMyShop()
					this.getMySell()
					this.goodsList = this.mySellList.concat(this.myShopList)
				} else if (index == 1) {
					this.getMyShop()
					this.goodsList = this.myShopList
					this.btnShow = true
					this.btnShow1 = false
				} else if (index == 2) {
					this.getMySell()
					this.goodsList = this.mySellList
					this.btnShow1 = true
					this.btnShow = false
				}
			},
			//购买的商品
			getMyShop() {
				user.myshopping().then(res => {
					console.log(res)
					this.mySellList = res.data.records
				})
			},
			//出售的商品
			getMySell() {
				user.mySell().then(res => {
					console.log(res)
					this.myShopList = res.data.records
				})
			},
			//确认收货
			orderOver(id) {
				
				const that = this
				uni.showModal({
					
					title: '确认收货中...',
					content: '是否确认收货？',
					success: function(res) {
						if (res.confirm) {

							console.log('用户点击确定');
							uni.showToast({
								title: "确认收货中",
								icon: 'loading', // 可以是 'success'、'loading'、'none'  
								duration: 1000, // 持续时间，单位毫秒，默认1500  
								success() {
									setTimeout(function() {
										user.orderOver(id).then(res => {
											console.log(res)
											console.log(id)
											console.log("2秒后确认收货了")
										})
										uni.navigateTo({
											url:"/pages/myGoods/myGoods?id=1"
										})
									}, 1000)
									// that.getMyShop()
								}
							})
						}
					},

				});
			},
			//中止交易
			orderEnd(id) {
				const that = this
				uni.showModal({
					title: '中止交易中...',
					content: '是否确认中止交易？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showToast({
								title: "交易正在中止",
								icon: 'loading', // 可以是 'success'、'loading'、'none'  
								duration: 1000, // 持续时间，单位毫秒，默认1500  
								success() {
									setTimeout(function() {
										user.orderEnd(id).then(res => {
											console.log(res)
										})
										console.log("2秒后交易中止了")
										uni.navigateTo({
											url:"/pages/myGoods/myGoods?id=2"
										})
										// uni.redirectTo({
										// 	url:"/pages/myGoods/myGoods?id=2"
										// })
									}, 1000)
								}
							})
						}
					}
				});
			},
			//下架商品
			orderReset(id) {
				const that = this
				uni.showModal({
					title: '下架商品中...',
					content: '是否下架商品？',
					success: function(res) {
						// const that = this
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showToast({
								title: "商品下架中",
								icon: 'loading', // 可以是 'success'、'loading'、'none'  
								duration: 1000, // 持续时间，单位毫秒，默认1500  
								success() {
									setTimeout(function() {
										user.orderReset(id).then(res => {
											console.log(res)
										})
										console.log("2秒后商品下架")
										uni.navigateTo({
											url:"/pages/myGoods/myGoods?id=1"
										})
									}, 1000)
									// that.getMySell()
								}
							})
						}
					}
				});
			}
		}

	}
</script>
<style>
	.search-btn {
		background-color: #00a8cc;
		/* Green */
		color: white;
		text-align: center;
		float: right;
		font-size: 24rpx;
		width: 180rpx;
		height: 70rpx;
		line-height: 65rpx;
		border-radius: 30rpx;
		letter-spacing: 3rpx;
		margin: 10rpx;
	}


	/* 商品栏 */
	.commodity {
		margin-top: 5rpx;
	}



	.no_data_style {
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
		font-weight: bold;
		color: #2c2c2c;
	}

	.no_data_style image {
		width: 100rpx;
		margin-bottom: 20rpx;
	}

	.list {
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 20rpx;
	}

	.list_item {
		width: 88%;
		display: flex;
		flex-direction: column;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);
		margin-bottom: 50rpx;
	}


	/* 分类导航 */

	.horizonal-tab .active {
		color: red;
	}

	.scroll-tab {
		white-space: nowrap;
		/* 必要，导航栏才能横向*/
		border-bottom: 1rpx solid #eee;
		text-align: center;
	}

	.scroll-tab-item {
		display: inline-block;
		/* 必要，导航栏才能横向*/
		margin: 20rpx 30rpx 0 30rpx;
		font-size: 18px;
	}

	.active .scroll-tab-line {
		border-bottom: 5rpx solid red;
		border-top: 5rpx solid red;
		border-radius: 20rpx;
		width: 100%;

	}

	.top {
		display: flex;
		justify-content: space-between;

	}
	.topleft{
		width: 100%;
		height: 100%;
	}
	.left {
		width: 30%;
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.store {
		margin: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.item {
		display: flex;
		margin: 20rpx 0 0;

	}

	image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		margin-left: 20rpx;
	}

	.content {
		width: 50%;
		position: relative;
		display: inline-flex;
		flex-direction: column;
	}

	.title {
		font-size: 28rpx;
		line-height: 50rpx;
	}

	.delivery-time {
		position: absolute;
		bottom: -40rpx;
		color: #e5d001;
		font-size: 24rpx;
	}

	.right {
		width: 20%;
		margin-left: 10rpx;
		padding-top: 20rpx;
		text-align: right;
		position: relative;
		display: inline-flex;
		flex-direction: column;
	}

	.price {
		margin: 10rpx;
		position: absolute;
		bottom: 0;
	}

	.bottom {
		margin-top: 40rpx;
		padding: 10rpx;
	}
</style>